<template>
    <div class="banner">
        Star
    </div>
    <br>
    <el-row>
        <el-col :span="6"></el-col>
        <el-col :span="12">

            <el-timeline>
                <el-timeline-item
                        type="primary"
                        size="large"
                        placement="top"
                        :timestamp="dateFormat"
                >
                    <span style="font-size: 1.2em;">累计收藏了 {{ total }} 篇文章</span>
                </el-timeline-item>

                <el-timeline-item
                        v-for="(blog, index) in blogs"
                        :key="index"
                        type="primary"
                        size="large"
                        placement="top"
                        :hollow="true"
                        :timestamp="'收藏时间：'+blog.starTime"
                >
                    <el-card>
                        <template #header>
                            <a :href="'/article/'+blog.blogId"
                               style="font-size: 1.3em;font-weight: bolder;color: #044b46">{{ blog.blogTitle }}</a>
                            <el-button type="danger" style="float: right" @click="delStar(blog.blogId)">取消收藏</el-button>
                        </template>
                        <!-- 正文摘要 -->
                        <el-link :href="'/categories/'+blog.blogCategoryId">
                            <el-icon>
                                <Files/>
                            </el-icon>
                            {{ blog.blogCategoryName }}
                        </el-link>

                        <!--标签-->
                        <el-icon style="margin-left: 40px">
                            <Discount/>
                        </el-icon>&nbsp;
                        <template v-for="(tag,index) in blog.tags">
                            <template v-if="index > 0" :key="tag.tagId"> &nbsp;|&nbsp;</template>
                            <a :href="'/tag/'+tag.tagId" :style="{color:tag.tagColor}">{{ tag.tagName }}</a>
                        </template>
                        <hr style="border: 1px solid #eeeeee;">
                        <!--文章摘要-->
                        <div class="article-content">{{ blog.blogAbstract }}</div>

                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <div style="text-align: center;">
                <el-image v-if="total===0" src="/nodata.png" style="height: 300px;"></el-image>
            </div>

            <el-divider></el-divider>
            <!--分页-->
            <div style="display: flex;">
                <el-pagination
                        v-model:current-page="current"
                        v-model:page-size="size"
                        :page-sizes="[10, 20, 30, 40]"
                        :small="true"
                        :background="true"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        style="margin: auto;"
                />
            </div>


        </el-col>
        <el-col :span="6"></el-col>
    </el-row>


</template>

<script>

import userStore from "@/store/UserStore"
import pinia from "@/store/pinia";
import {ElMessage} from "element-plus";

const store = userStore(pinia)

export default {
    name: "Star",
    computed: {
        dateFormat() {
            let ret;
            let fmt = "YYYY年mm月dd日 HH:MM:SS"
            let date = new Date()
            const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                }
            }
            return fmt;
        }
    },
    created() {
        this.init()
    },
    data() {
        return {
            blogs: [],
            total: 0,
            current: 1,
            size: 10,
        }
    },
    methods: {
        async init() {
            let {data: result} = await this.$http.get("/api/star/getStarBlog", {
                params: {
                    userId: store.getUserId,
                    pageSize: this.size,
                    pageNum: this.current,
                }
            })
            console.log(result)
            this.total = result.dataMap.page.total
            this.current = result.dataMap.page.current
            this.size = result.dataMap.page.size
            this.blogs = result.dataMap.page.records
        },
        // 分页大小改变
        handleSizeChange() {
            this.init()
        },
        // 分页页数改变
        handleCurrentChange() {
            this.init()
        },
        async delStar(blogId) {
            let {data: result} = await this.$http.post("/api/star/delStar", {
                    userId: store.getUserId,
                    blogId: blogId
                }
            )
            if (result.code === 200) {
                this.isStar = false
            }
            ElMessage.success(result.msg)
            this.init()
        },
    }
}
</script>

<style scoped>
.banner {
    background-image: url('/headImg/star.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    width: 100%;

    color: white;
    font-size: 3em;
    font-weight: bolder;
    text-align: center;
    padding-top: 200px;
}

a {
    /*color: #036b67;*/
    text-decoration-line: none;
    margin-bottom: 10px;
    font-size: 1em;
}

.article-content {
    margin-top: 15px;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>